<template>
  <div class="container">
    <div class="login-container">
      <el-container>
        <el-header>
          <div class="title-container">
            <h1 class="title">卡倍多宝鸡市场管理系统</h1>
            <div class="brief"><IconSets icon="fxemoji:sheep" />一家做食品的企业</div>
          </div>
        </el-header>
        <el-main>
          <el-form label-width="auto" style="max-width: 600px; margin-bottom: 40px">
            <el-form-item>
              <el-input v-model="username" size="large" placeholder="用户名" />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="password"
                size="large"
                type="password"
                placeholder="密码"
                show-password
              />
            </el-form-item>
          </el-form>
          <el-button class="login-btn" color="#628c40" size="large" @click="login" :loading="loading">
            登录账号
          </el-button>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import { getTime } from '@/utils/time.js'
import useUserStore from "@/stores/modules/user.js"

const useStore = useUserStore()
const username = ref('')
const password = ref('')
const router = useRouter()
const route = useRoute()
let loading = ref(false)

const login = async () => {
  loading.value = true;

  //保证登录成功
  const result = await useStore.userLogin({
    username: username.value,
    password: password.value,
  })

  if (result === true) {
    //编程式导航跳转到展示数据首页
    //判断登录的时候,路由路径当中是否有query参数，如果有就往query参数挑战，没有跳转到首页
    const redirect = route.query.redirect
    await router.push({path: redirect || '/'})

    //登录成功提示信息
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `HI, ${getTime()}好`
    })
  }

  loading.value = false;
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  background-color: #e4edd3;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%2395b37c' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.login-container {
  max-width: 640px;
  width: 500px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 10%;
  background-color: #fff;
}
.el-header {
  display: flex;
  align-items: center;
}
.title-container {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
}
.title {
  font-size: 20px;
  padding-bottom: 5px;
}
.brief {
  color: #cfcfcf;
}
.login-btn {
  width: 100%;
}
</style>
